<template>
    <div>
        <el-form :inline="true" :model="condition" class="search-form" label-width="100px">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="箱号">
                        <el-input v-model="condition['search_LIKE_containerId']"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="作业港口">
                        <select-port :name="portName"
                                     v-model="portName" :isMultiple = "true"></select-port>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="作业类型">
                        <el-select v-model="search_EQ_planType" placeholder="请选择" clearable multiple>
                            <el-option v-for="[key, val] in _dictAllJobStatusNew" :key="key" :label="val" :value="key">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="船代">
                        <el-select v-model="search_EQ_shipAgentCode" multiple placeholder="请选择">
                            <el-option
                                v-for="item in shipList"
                                :key="item.customerCode"
                                :label="item.name"
                                :value="item.customerCode">
                            </el-option>
                        </el-select>
                        <!-- <auto-search-custom @selectCode="v=>condition['search_EQ_shipAgentCode']=v" 
                            :name="condition['search_EQ_shipAgentName']" 
                            :isShipAgent="true"
                             :isMultiple="true">
                        </auto-search-custom> -->
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="船名">
                        <auto-search-ship @selectName="v=>condition['search_LIKE_shipName']=v" :name="condition['search_LIKE_shipName']"
                                          ship="shipCName"></auto-search-ship>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="航次">
                        <el-input v-model="condition['search_LIKE_voyage']"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="空重：">
                        <el-select v-model="condition['search_EQ_ef']" placeholder="请选择" clearable>
                            <el-option v-for="[key, val] in _dictIfHeavyType" :key="key" :label="val"
                                       :value="key"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="内外贸：" >
                        <el-select v-model="condition['search_EQ_tradeType']" placeholder="请选择" clearable>
                            <el-option v-for="[key, val] in _dictTradeType" :key="key" :label="val" :value="key">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="尺寸">
                        <autoSearchSize v-model="condition['search_EQ_containerSize']"></autoSearchSize>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="作业人">
                        <el-input v-model="condition['search_LIKE_jobUser']"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="作业时间">
                        <date-slot :startDate.sync="condition.search_GTE_jobTime"
                                   :endDate.sync="condition.search_LTE_jobTime"></date-slot>
                        <!-- <el-date-picker v-model="condition['search_GTE_jobTime']" :picker-options="startPickerOptions" type="date" placeholder="起始日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker> -->
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="结算单位">
                        <auto-search-custom @selectName="v=>condition['search_EQ_accountUnit']=v"
                                            :isShipAgent="true" :isSpecialForm="true"></auto-search-custom>
                        <!-- <auto-search-custom
                            @selectName="v=>condition['search_EQ_accountUnit']=v" ></auto-search-custom> -->
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="提单号：">
                        <el-input v-model="condition['search_LIKE_billNumber']"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="箱主">
                        <!-- <autoSearchCustom v-model="condition['search_EQ_ownerId']"></autoSearchCustom> -->
                        <autoSearchCustom 
                            v-model="condition['search_EQ_containerOwnerCode']" 
                            :isOwner="true"
                            @selectCode="v=>condition['search_EQ_containerOwnerCode']=v"></autoSearchCustom>
                    </el-form-item>
                </el-col>
                <el-col :span="2">
                    <el-form-item label="">
                        <el-checkbox v-model="search_passedNotDevan">未拆箱</el-checkbox>
                    </el-form-item>
                </el-col>
                <el-col :span="2">
                    <el-form-item label="">
                        <el-checkbox v-model="search_change">水转水</el-checkbox>
                    </el-form-item>
                </el-col>
                <el-col :span="2">
                    <el-form-item label="">
                        <el-checkbox v-model="search_isPass">未放行</el-checkbox>
                    </el-form-item>
                </el-col>
            </el-row>
            <!-- <el-row>
                <el-col :span="8">
                    <el-form-item label="作业人">
                        <el-input v-model="condition['search_LIKE_jobUser']"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="作业时间起">
                        <el-date-picker v-model="condition['search_GTE_jobTime']" :picker-options="startPickerOptions" type="date" placeholder="起始日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="作业时间止">
                        <el-date-picker v-model="condition['search_LTE_jobTime']" @change="handleChangeEnd" :picker-options="endPickerOptions" type="date" placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row> -->
            <el-row>
                <el-col :span="20" style="text-align: right;">
                    <el-button type="primary" class="ml-80" @click="loadData">查 询</el-button>
                    <el-button @click="handleExport">导出Excel</el-button>
                </el-col>
            </el-row>
        </el-form>
        <el-row type="flex" justify="end" class="mt-10 ">
            <el-col :span="16" style="display: flex;justify-content: space-between;width: 100%;">
                <title-point color="#50B155">
                    <div slot="content">
                        总共 :
                        <span style="font-size: 16px">{{total}}条</span>
                    </div>
                </title-point>
            </el-col>
        </el-row>
        <el-table :data="data" :default-expand-all="false" border stripe max-height="500" class="mt-10">
            <el-table-column type="index" fixed="left" label="序号" width="55"></el-table-column>
            <el-table-column prop="planType" label="作业类型"  min-width="110">
                <template slot-scope="scope">
                    <el-button size="small" type="text" @click="handleDetail(scope.row)">
                        {{ scope.row.planType | _filterAllJobStatusNew }}
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column prop="containerId" label="箱号"  min-width="120"></el-table-column>
            <el-table-column prop="billNumber" label="提单号"  min-width="120"></el-table-column>
            <el-table-column prop="containerSize" label="尺寸"  min-width="120"></el-table-column>
            <el-table-column prop="containerType" label="箱型"  min-width="80"></el-table-column>
            <el-table-column prop="sealNo" label="铅封"  min-width="110"></el-table-column>
            <el-table-column prop="ef" label="空重"  min-width="110">
                <template slot-scope="scope">
                    {{ scope.row.ef | _filterIfHeavyType }}
                </template>
            </el-table-column>
            <el-table-column prop="accountUnit" label="付费单位"  min-width="110"></el-table-column>
            <el-table-column prop="shipAgentName" label="船代"  min-width="110"></el-table-column>
            <el-table-column prop="containerOwnerName" label="箱主"  min-width="110"></el-table-column>
            <el-table-column prop="cargoName" label="货名"  min-width="110"></el-table-column>
            <el-table-column prop="cargoWeight" label="重量"  min-width="110"></el-table-column>
            <el-table-column prop="tradeType" label="内外贸"  min-width="110">
                <template slot-scope="scope">
                    {{ scope.row.tradeType | _filterTradeType }}
                </template>
            </el-table-column>
            <el-table-column prop="shipVoyage" label="船名/航次"  min-width="110">
                <template slot-scope="scope">
                    {{ scope.row.shipName}}{{(scope.row.voyage == "" || scope.row.voyage == null) ? "" :"/"}}{{scope.row.voyage}}
                </template>
            </el-table-column>
            <el-table-column prop="portCode" label="作业港口"  min-width="130">
                <template slot-scope="scope">
                    {{ scope.row.portCode | _filterPortCode }}
                </template>
            </el-table-column>
            <el-table-column prop="jobUser" label="作业人"  min-width="110"></el-table-column>
            <el-table-column prop="jobTime" label="作业时间"  min-width="150"></el-table-column>
        </el-table>
        <el-row class="bottom" type="flex" justify="space-between" v-show="total>0">
            <div class="oper">

            </div>
            <el-pagination class="page" @size-change="size=>pageInfo.iDisplayLength=size"
                           layout="total, sizes, prev, pager, next, jumper"
                           :current-page.sync="pageInfo.pageStart" :page-sizes="pageInfo.pageArr"
                           :page-size="pageInfo.iDisplayLength" :total="total">
            </el-pagination>
        </el-row>
        <load-detail-form v-if="dialogForm" ref="loadDetailForm" @load="loadData"></load-detail-form>
        <unbox-detail-form v-if="dialogForm" ref="unboxDetailForm" @load="loadData"></unbox-detail-form>
        <special-detail-form v-if="dialogForm" ref="specialDetailForm"></special-detail-form>
    </div>
</template>

<script>
    import selectPort from '@/components/select/selectPort'
    import { newExportExcel } from "@/utils/newExport";
    import { getLocalTime } from "../../../utils/dateFormat";
    import autoSearchCustom from '@/components/autocomplete/autoSearchCustom';
    import autoSearchResource from '@/components/autocomplete/autoSearchResource';
    import { getJobtrace } from "@/api/shipPlan/shipPlan";
    import autoSearchShip from '@/components/autocomplete/autoSearchShip'
    import titlePoint from '../common/title-point'
    import { tradeType, ifHeavyType, portCode, allJobStatusNew } from "../../../assets/dict";
    import { getPlanId} from '@/api/planList/planList.js'
    import { preview } from "@/api/attachment/attachment";
    import loadDetailForm from './loadDetailForm'
    import unboxDetailForm from './unboxDetailForm'
    import specialDetailForm from './specialDetailForm'
    import autoSearchSize from '@/components/autocomplete/autoSearchSize'
    import dateSlot from '@/components/date/dateSlot'
    import { getListShip } from "@/api/custom/customList"
    export default {
        name: "作业跟踪",
        components: { selectPort, 
            autoSearchCustom, 
            autoSearchResource, 
            autoSearchShip, 
            titlePoint, 
            loadDetailForm, 
            unboxDetailForm, 
            specialDetailForm, 
            autoSearchSize,
            dateSlot},
        data() {
            return {
                condition: this.clearCondition(),
                pageInfo: this.$defalutPage(),
                data: [],
                shipList: [],
                total: 0,
                created: true,
                portName : '',
                search_EQ_shipAgentCode : '',
                search_EQ_planType: '',
                dialogForm : false,
                search_passedNotDevan: false,
                search_change: false,
                search_isPass: false,
            }
        },
        mounted() {
            this.loadData();
            this.getListShipList();
        },
        methods: {
            loadData() {
                if (this.portName != "" && this.portName != null){
                    this.condition.search_IN_portCode = this.arrayToString(this.portName)
                }
                if (this.search_EQ_shipAgentCode.length>0){
                    this.condition.search_IN_shipAgentCode = this.arrayToString(this.search_EQ_shipAgentCode)
                }else{
                    this.condition.search_IN_shipAgentCode = '';
                }
                if (this.search_EQ_planType.length>0){
                    this.condition.search_IN_planType = this.arrayToString(this.search_EQ_planType)
                }else{
                    this.condition.search_EQ_planType = '';
                }
                if(this.search_passedNotDevan || this.search_change || this.search_isPass) {
                    this.condition.search_EQ_passedNotDevan = this.trueOrFalseHandle(this.search_passedNotDevan)
                    this.condition.search_EQ_change = this.trueOrFalseHandle(this.search_change)
                    this.condition.search_EQ_isPass = this.trueOrFalseHandle(this.search_isPass)
                }else{
                    this.condition.search_EQ_passedNotDevan = 0
                    this.condition.search_EQ_change = 0
                    this.condition.search_EQ_isPass = 0
                }
                let params = this.$assist.copySearchConditions(this.condition)
                params.iDisplayStart = this.pageInfo.pageStart - 1
                params.iDisplayLength = this.pageInfo.iDisplayLength
                getJobtrace(params).then(res => {
                    console.info(res)
                    this.created = false
                    this.data = res.data.aaData
                    this.total = res.data.iTotalRecords
                })
            },
            clearCondition() {
                return {
                    search_LIKE_containerId :'',
                    search_IN_portCode: '',
                    search_EQ_planType : '',
                    search_IN_shipAgentCode : '',
                    search_LIKE_shipName: '',
                    search_LIKE_voyage: '',
                    search_LIKE_jobUser : '',
                    search_EQ_containerSize:'',
                    search_EQ_ef:'',
                    search_EQ_tradeType:'',
                    search_EQ_accountUnit:'',
                    search_LIKE_billNumber:'',
                    search_EQ_passedNotDevan: 0,
                    search_EQ_change: 0,
                    search_EQ_isPass: 0,
                    search_GTE_jobTime: getLocalTime(new Date(), "YYYY-MM-DD")+' 00:00:00',
                    search_LTE_jobTime: getLocalTime(new Date(), "YYYY-MM-DD")+' 23:59:59',
                }
            },
            trueOrFalseHandle(status) {
                if(status == true) {
                    status = 1
                }else{
                    status = 0
                }
                return status;
            },
            getListShipList() {
                let that = this;
                let params = {
                    'search_LIKE_name': this.condition.search_IN_shipAgentCode,
                    // 'iDisplayLength': this.iDisplayLength,
                    'search_EQ_custBusAttribute.isShipAgent': true
                }
                getListShip(params).then(function(res) {
                    that.shipList = res.data.aaData;
                })
            },
            handleDetail(val){
                if (val.planType == 'ZC') {
                    sessionStorage.setItem('reportId', val.planNo);
                    sessionStorage.setItem('ContainerId', val.containerId)
                    this.$router.push({
                        path: '/work/shipPlan/report',
                        name: '装船理箱报告'
                    })
                } else if(val.planType == 'XC') {
                    sessionStorage.setItem('unReportId', val.planNo)
                    sessionStorage.setItem('ContainerId', val.containerId)
                    this.$router.push({ path: '/work/shipPlan/unReport', name: '卸船理箱报告' })
                } else if (val.planType == 'T' || val.planType == 'C'){
                    this.handleProgress({path: '/work/feeClose',name: '拆提放行'})
                    sessionStorage.setItem('ContainerId', val.containerId)
                }  else if (val.planType == 'ZX'){
                    this.handleDetailZX(val.planNo)
                    sessionStorage.removeItem('ContainerId')
                } else if (val.planType == 'CX'){
                    this.handleDetailCX(val.planNo)
                    sessionStorage.removeItem('ContainerId')
                } else if (val.planType == 'XZ' || val.planType == 'EZ'){
                    this.handleDetailSpecial(val.planNo)
                     sessionStorage.removeItem('ContainerId')
                }
            },
            //特殊理箱详情
            handleDetailSpecial(val) {
                getPlanId(val).then(res => {
                    this.dialogForm = true
                    this.$nextTick(() => {
                        this.$refs.specialDetailForm.dialogForm = true
                        let form = JSON.parse(JSON.stringify(res.data))
                        delete form.records
                        this.$refs.specialDetailForm.form = form
                        this.$refs.specialDetailForm.table = res.data.records
                    })
                })
            },
            //拆箱理货详情
            handleDetailCX(val) {
                getPlanId(val).then(res => {
                    this.dialogForm = true
                    this.$nextTick(() => {
                        this.$refs.unboxDetailForm.dialogForm = true
                        let form = JSON.parse(JSON.stringify(res.data))
                        delete form.records
                        this.$refs.unboxDetailForm.form = form
                        this.$refs.unboxDetailForm.table = res.data.records
                        this.$refs.unboxDetailForm.isShowByLoad = false
                        this.$refs.unboxDetailForm.isShowRight = false
                    })
                })
            },
            // 查看装箱详情
            handleDetailZX(val) {
                getPlanId(val).then(res => {
                    this.dialogForm = true
                    this.$nextTick(() => {
                        this.$refs.loadDetailForm.dialogForm = true
                        let form = JSON.parse(JSON.stringify(res.data))
                        delete form.records
                        if (form.attachments != null && form.attachments.length > 0){
                            form.attachments.forEach(item => {
                                preview(item.id).then(res => {
                                    let url = res.data
                                    let strUrl = res.data.substr(0, url.length - 2)
                                    item.viewPath = strUrl.substr(url.indexOf('=') + 1, strUrl.length)
                                }).catch(err =>{
                                    item.viewPath = 'http://img10.360buyimg.com/n1/jfs/t17479/331/463860348/54829/98c31e6d/5a7bb620N7ca92f1c.jpg'
                                })
                            })
                        }
                        this.$refs.loadDetailForm.form = form
                        this.$refs.loadDetailForm.table = res.data.records
                        this.$refs.loadDetailForm.isShowByLoad = false
                        this.$refs.loadDetailForm.isShowByHistory = false
                        this.$refs.loadDetailForm.accountUnit = form.shipAgentName
                        this.$refs.loadDetailForm.accountWay = 'M'
                    })
                })
            },
            handleProgress(val, cd) {
                sessionStorage.setItem('SHIP_DATE', getLocalTime(new Date(), 'YYYY-MM-DD'))
                if (val.name.indexOf('拆提放行') !== -1) {
                    const condition = JSON.stringify({ ...this.condition, search_EQ_isFinish: cd })
                    sessionStorage.setItem('shipIndex', condition)
                } else {
                    const condition = JSON.stringify({ ...this.condition })
                    sessionStorage.setItem('ctIndex', condition)
                }
                this.$store.commit("ADD_CACHED_VIEWS", val);
                this.$router.push(val.path);
            },
            handleChangeEnd(val) {
                let setVal = val;
                if (val) {
                    setVal = val.split(" ")[0] + " 23:59:59";
                }
                this.condition["search_LTE_jobTime"] = setVal;
            },
            arrayToString:function(arr){
                let value = ""
                if (arr != null && arr != "" && arr.length > 0){
                    arr.forEach((column, index) => {
                        value = value + "," + column
                    })
                    value = value.substring(1)
                }
                return value
            },
            handleExport() {
                let map = new Map();
                map.set("containerId", "箱号");
                map.set("containerSize", "尺寸");
                map.set("containerType", "箱型");
                map.set("sealNo", "铅封");
                map.set("ef", "空重");
                map.set("shipAgentName", "船代");
                map.set("cargoName", "货名");
                map.set("cargoWeight", "重量");
                map.set("tradeType", "内外贸");
                map.set("containerOwnerName", "箱主");
                map.set("shipName", "船名")
                map.set("voyage", "航次");
                map.set("portCode", "作业港口");
                map.set("planType", "作业类型");
                map.set("jobUser", "作业人");
                map.set("jobTime", "作业时间");
                if (this.portName != "" && this.portName != null){
                    this.condition.search_IN_portCode = this.arrayToString(this.portName)
                }
                let params = this.$assist.copySearchConditions(this.condition)
                params.iDisplayStart = this.pageInfo.pageStart - 1
                params.iDisplayLength = 9999
                getJobtrace(params).then(res => {
                    let exportRecords = [];
                    let exportArr = res.data.aaData;
                    exportArr.forEach(record => {
                        let exportRecord = {};
                        for (let [key, value] of map.entries()) {
                            if (key === "ef") {
                                record[key] = ifHeavyType.get(record[key]);
                            }
                            if (key === "tradeType") {
                                record[key] = tradeType.get(record[key]);
                            }
                            if (key === "portCode") {
                                record[key] = portCode.get(record[key]);
                            }
                            if (key === 'planType') {
                                record[key] = allJobStatusNew.get(record[key])
                            }
                            exportRecord[value] = record[key];
                        }
                        exportRecords.push(exportRecord);
                    });
                    newExportExcel("作业跟踪", exportRecords);
                })
            },
            handleRouterPush(val) {
                this.$store.commit("ADD_CACHED_VIEWS", val);
                this.$router.push(val.path);
            },
        },
        filters: {
            filterDate(val) {
                return val ? val.substr(0, 10) : '-'
            }
        },
        watch: {
            pageInfo: {
                deep: true,
                handler: function () {
                    this.loadData()
                }
            }
        },
        activated() {
            if (!this.created) {
                this.loadData()
            }
        },
        computed: {
            startPickerOptions() {
                let endDate = this.condition["search_LTE_jobTime"];
                return {
                    disabledDate(time) {
                        if (endDate) {
                            return time.getTime() > new Date(endDate).getTime();
                        } else {
                            return false;
                        }
                    }
                };
            },
            endPickerOptions() {
                let startDate = this.condition["search_GTE_jobTime"];
                return {
                    disabledDate(time) {
                        if (startDate) {
                            return time.getTime() < new Date(startDate).getTime();
                        } else {
                            return false;
                        }
                    }
                };
            }
        }
    }
</script>

<style scoped>

</style>
